<template>
  <div  v-loading="loading"
    element-loading-text="加载中。。。">
    <el-card >
      <el-form ref='QueryForm' :model='QueryForm' :rules="queryRules" size='mini'  label-position="top">
        <el-row :gutter="10">
          <el-col  :lg="4" :md="6">
            <el-form-item label='应用编号'  prop='appId'>
              <el-select v-model="QueryForm.appId" @change="appChange" filterable placeholder="请选择应用编号" >
                <el-option
                v-for="item in appId"
                :key="item.AppNum"
                :label="item.AppNum+'-'+item.AppName"
                :value="item.AppNum"
                :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  :lg="4" :md="6">
            <el-form-item label='菜单视图'  prop='menuView'>
              <el-select v-model="QueryForm.menuView"  placeholder="请选择菜单视图" >
                <el-option
                v-for="item in menuView"
                :key="item.menuviewnum+'-'+item.appnum"
                :label="item.menuviewnum+'-'+item.menuviewname"
                :value="item.menuviewnum"
                :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type='primary' size='mini' icon='el-icon-search' @click="queryDeal">查询</el-button>
          </el-col>
          <el-col  :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh'
            @click="resetForm('QueryForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card class="itemHeight">
            <div slot="header" class="clearfix">
              <span>交易树</span>
                <span class="treeTitle">右击进行操作</span>
                <!-- <el-button style="float:right;padding: 1px 0" type="text">提示</el-button> -->
            </div>
            <div style="height:500px;overflow:auto">
              <el-tree
                :data="tradeTreeData"
                node-key="MenuNum"
                :props="{label:'MenuName',children:'Children'}"
                @node-click="clickEvent"
                @node-contextmenu="rightClick" >
              </el-tree>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card class="itemHeight">
            <div slot="header" >
              <span>{{rightTitle?rightTitle:"维护"}}</span>
            </div>
            <div v-if="addTradeGroup" style="height:500px;overflow:auto">
              <el-form ref='menuGroupAdd' :model='menuGroupAdd' :rules="rules" size="mini"  label-width="110px" label-position="top">

                <el-row :gutter="10">
                  <el-col :span='6' >
                    <el-form-item label="上级节点编号:" prop='ParentMenuNum'>
                      <el-input v-model="menuGroupAdd.ParentMenuNum" disabled placeholder="请输入上级节点编号"></el-input>
                    </el-form-item>
                  </el-col>
                   <el-col :span='6'>
                    <el-form-item label="交易分组ID:" prop='MenuNum'>
                      <el-input v-model="menuGroupAdd.MenuNum" :disabled="isDisabled" placeholder="请输入交易分组ID"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="交易名称:" prop='MenuName'>
                      <el-input v-model="menuGroupAdd.MenuName" placeholder="请输入菜单项标题"></el-input>
                    </el-form-item>
                  </el-col>
                   <el-col :span='6'>
                    <el-form-item label="英文名称:" prop='MenuEnglishName'>
                      <el-input v-model="menuGroupAdd.MenuEnglishName" placeholder="请输入英文名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="分组排序号:" prop='SortNum'>
                      <el-input v-model="menuGroupAdd.SortNum"  placeholder="请输入交易分组排序号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                      <el-form-item label="法人号:" prop='AttrLegalPerson'>
                        <el-select v-model="menuGroupAdd.AttrLegalPerson"  placeholder="请选择法人号" >
                          <el-option
                          v-for="item in AttrLegalPerson"
                          :key="item.LegalPersonNum"
                          :label="item.LegalPersonName"
                          :value="item.LegalPersonNum"
                          :disabled="item.disabled">
                          </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col  :span='6'  >
                    <!-- <el-tooltip class="item" effect="dark" content="菜单项大小为自定义时可用" placement="top-start">                   -->
                      <el-form-item label="交易路径:" prop='MenuPath'>
                            <el-input v-model="menuGroupAdd.MenuPath"  placeholder="请输入交易路径"></el-input>
                      </el-form-item>
                    <!-- </el-tooltip> -->
                  </el-col>
                  <el-col :span='6' >
                    <el-form-item label="大小:" prop='MenuSize'>
                      <el-select v-model="menuGroupAdd.MenuSize"
                        @change="sizeChange" placeholder="请选择交易">
                          <el-option
                            v-for="item in menuItemSize"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                          </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="10" v-if="isShowGroup">
                  <el-col :span='6'>
                    <el-form-item label="分组行数:" prop='LayoutRow' >
                      <el-input v-model="menuGroupAdd.LayoutRow" placeholder="请输入菜单组行数"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="分组列数:" prop='LayoutCol'>
                      <el-input v-model="menuGroupAdd.LayoutCol"  placeholder="请输入菜单组列数"></el-input>
                    </el-form-item>
                  </el-col>
                   
                <!-- </el-row>

                <el-row :gutter="10" v-if="isShowTrade"> -->
                  
                  <el-col  :span='6'  >
                    <!-- <el-tooltip class="item" effect="dark" content="菜单项大小为自定义时可用" placement="top-start">                   -->
                      <el-form-item label="宽度:" prop='menuItemWidth'>
                            <el-input v-model="menuGroupAdd.menuItemWidth" :disabled="isDisabledSize"  placeholder="请输入交易宽度(像素--数值)"></el-input>
                      </el-form-item>
                    <!-- </el-tooltip> -->
                  </el-col>
                  <el-col  :span='6' >
                    <!-- <el-tooltip class="item" effect="dark" content="菜单项大小为自定义时可用" placement="top-start"> -->
                      <el-form-item label="高度:" prop='menuItemHeight'>
                            <el-input v-model="menuGroupAdd.menuItemHeight" :disabled="isDisabledSize" placeholder="请输入交易高度(像素--数值)"></el-input>
                      </el-form-item>
                    <!-- </el-tooltip> -->
                  </el-col>
                  <el-col  :span='6'  >
                    <el-form-item label="图标:" prop='MenuIcon'>
                      <el-upload
                        :action= fileUploadUrl
                        list-type="picture"
                        :on-progress="handleProgress"
                        :on-preview="handlePreview"
                        :before-remove="beforeRemove"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :limit="1"
                        :on-exceed="handleExceed"
                        accept=".zip, .jpg, .jpeg , .png"
                        >
                      <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过500kb" placement="top-start">
                        <el-button size="mini" type="primary">点击上传</el-button>
                      </el-tooltip>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6' >
                    <el-form-item label="背景图片:" prop='BG'>
                          <el-upload
                            :action= fileUploadUrl
                            list-type="picture"
                            :on-progress="handleProgressBG"
                            :on-preview="handlePreviewBG"
                            :before-remove="beforeRemoveBG"
                            :on-remove="handleRemoveBG"
                            :file-list="fileListBG"
                            :limit="1"
                            :on-exceed="handleExceedBG"
                            accept=".zip, .jpg, .jpeg , .png"
                            >
                        <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过500kb" placement="top-start">
                          <el-button size="mini" type="primary">点击上传</el-button>
                        </el-tooltip>
                          </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col  :span='6' >
                    <el-form-item label="是否可见:" prop='IsVisiBle'>
                      <el-radio-group v-model="menuGroupAdd.IsVisiBle">
                          <el-radio label='1'>是</el-radio>
                          <el-radio label='0'>否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                   <el-col  :span='6' >
                    <el-form-item label=" 异步标识:" prop='Asyniden'>
                      <el-radio-group v-model="menuGroupAdd.Asyniden">
                          <el-radio label='1'>1-异步</el-radio>
                          <el-radio label='0'>0-同步</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="背景颜色:" prop='ThemeColor'>
                      <el-color-picker
                      v-model="menuGroupAdd.ThemeColor"
                      :predefine="predefineColors">
                      </el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col  :span='6' >
                    <el-form-item label="点击效果:" prop='ActiveClass'>
                      <el-select v-model="menuGroupAdd.ActiveClass" placeholder="请选择交易">
                        <el-option
                        v-for="item in menuItemClickEffact"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
               </el-row>

              </el-form>
              <el-row>
                <el-button type='warning' size='mini' @click="returnMes">返回</el-button>
                <el-button type='primary' size='mini' @click="sure">确定</el-button>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <div v-show="isShowMenu" class="rightStyle" v-clickoutside="handleClose" ref="rightClickLog" >
      <ul class="rightClickParent">
        <li class="rightClickChildren" >
          <el-button size="mini" type="text" :disabled="isRightClick"  @click="addTradGroup('交易目录维护','1')">新增交易分组</el-button>
        </li>
        <li class="rightClickChildren" >
          <el-button size="mini" type="text" :disabled="isRightClick"  @click="addTradGroup('交易维护','2')">新建交易</el-button>
        </li>
        <!-- <li class="rightClickChildren" >新建交易按钮</li> -->
        <li class="rightClickChildren">
         <el-button size="mini" type="text" @click="addTradGroup('修改','3')" v-if="isRoot">修改</el-button> </li>
        <li class="rightClickChildren">
        <el-button size="mini" type="text" @click="delBut" v-if="isRoot">删除</el-button>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
import getGlobalParams from "@/common/utils/getGlobalParams";
import request from "@/common/utils/request";
import queryDeal from "@/message/resourceManage/menu/menuItem/menuItem-query";
import menuAdd from "@/message/resourceManage/menu/menuItem/menu-item-add";
import appQuery from "@/message/shared/appquery"; //应用编号
import menuViewQuery from "@/message/resourceManage/menu/menuModel/menu-model-query";
import attrLegalPerson from "@/message/resourceManage/menu/menuItem/attrLegalPerson";

export default {
  data() {
    return {
      isRightClick: false, //是否可以为交易新建
      isRoot: false,
      AttrLegalPerson: [],
      isHasData: true,
      isDisabled: false,
      isShowGroup: true,
      isShowTrade: true,
      currentRow: undefined,
      mark: "", //操作类型
      isDisabledSize: true,
      predefineColors: [],
      menuItemClickEffact: [{ value: "testClass", label: "testClass" }],
      fileList: [],
      fileListBG: [],
      fileUploadUrl: "",
      menuItemSize: [
        { label: "正常", value: "normal" },
        { label: "宽", value: "wide" },
        { label: "小", value: "small" },
        { label: "小宽", value: "smallWide" },
        { label: "自定义", value: "4" }
      ],
      menuGroupAdd: {
        //表单数据
        IsVisiBle: "1",
        Asyniden: "1",
        ThemeColor: "#409EFF",
        menuGroupTitle: "",
        menuGroupRow: "",
        menuGroupCol: "",
        menuGroupDeal: [],
        parentId: "",
        tradeGroupId: ""
      },
      addTradeGroup: false, //控制右边维护是否显示
      addTrade: false, //控制新增交易
      rightTitle: "", //右边操作区标题
      isShowMenu: false,
      tradeTreeData: [],
      isShowAdd: false, //是否显示右边得维护部分
      QueryForm: {
        //查询表单
        appId: "",
        menuView: ""
      },
      appId: [], //应用编号下拉框
      menuView: [], //菜单视图下拉框
      loading: false,
      menuItemList: [], //交易表格数据
      selection: [], //选中表格数据
      total: undefined, //表格总条数
      currentPage: 1,
      pageSize: undefined,
      enum: {
        "1": "否",
        "0": "是"
      },
      enumSize: {
        //大小列表
        normal: "正常",
        wide: "宽",
        smallWide: "小宽",
        small: "小",
        "4": "自定义"
      },
      rules: {
        MenuNum: [
          { required: true, message: "请输入交易分组ID", trigger: "blur" }
        ],
        MenuName: [
          { required: true, message: "请输入交易名称", trigger: "blur" }
        ],
        SortNum: [
          { required: true, message: "请输入交易分组排序号", trigger: "blur" }
        ],
        AttrLegalPerson: [
          { required: true, message: "请选择法人号", trigger: "blur" }
        ]
      },
      queryRules: {
        appId: [{ required: true, message: "请应用编号", trigger: "change" }],
        menuView: [
          { required: true, message: "请选择菜单视图", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.pageSize = getGlobalParams.get("PageSize");
    this.fileUploadUrl = getGlobalParams.get("menuImgFileUploadAddress");
    this.fileDownloadUrl = getGlobalParams.get("menuImgDownloadAddress");
    this.predefineColors = getGlobalParams.get("predefineColors"); //获取背景颜色配置项
    this.queryAppId();
    this.initData();
  },
  directives: {
    clickoutside: {
      // 初始化指令
      bind(el, binding, vnode) {
        function documentHandler(e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false;
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e);
          }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener("click", el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
  methods: {
    initData() {
      // AttrLegalPerson
      let resBody = new attrLegalPerson();
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.AttrLegalPerson = response.RspInfo.Result;
          }
        })
        .catch(error => {});
    },
    appChange() {
      this.menuView = [];
      this.QueryForm.menuView = "";
      this.queryMenuView();
    },
    queryMenuView() {
      let resBody = new menuViewQuery();
      resBody.data.AppNum = this.QueryForm.appId;
      resBody.data.length = 99999;
      resBody.data.start = 0;
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            if (response.RspInfo) {
              this.menuView = response.RspInfo.pageList;
              console.log(this.menuView)
            } else {
              this.$message({
                type: "warning",
                message: SYS_HEAD.ReturnMessage
              });
            }
          }
        })
        .catch(error => {});
    },
    queryAppId() {
      let resBody1 = new appQuery();
      resBody1.data.UserNum = this.$store.getters.UserNum;
      request(resBody1)
        .then(response => {
          this.loading = false;
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.loadingSort = false;
            this.appId = response.RspInfo.Result;
          } else {
            this.loadingSort = false;
            this.$message({
              type: "warning",
              message: SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          this.loadingSort = false;
          //   this.logger.log("fail", error);
        });
    },
    clickEvent() {
      this.isShowMenu = false;
    },
    handleClose(e) {
      this.isShowMenu = false;
    },
    sure() {
      this.$refs.menuGroupAdd.validate(valid => {
        if (valid) {
          this.loading = true;
          let Oeration =
            this.mark == "1" || this.mark == "2" || this.mark == "0"
              ? "A"
              : this.mark == "3"
              ? "M"
              : "D";
          let resBody = new menuAdd();
          resBody.data.Oeration = Oeration; //操作方式（A新增，M修改，D删除）
          resBody.data.ParentMenuNum = this.menuGroupAdd.ParentMenuNum; //上级节点编号;
          resBody.data.MenuNum = this.menuGroupAdd.MenuNum; //交易分组ID
          resBody.data.MenuName = this.menuGroupAdd.MenuName; //交易名称
          resBody.data.MenuEnglishName = this.menuGroupAdd.MenuEnglishName; //英文名称
          resBody.data.SortNum = this.menuGroupAdd.SortNum; //分组排序号
          resBody.data.AttrLegalPerson = this.menuGroupAdd.AttrLegalPerson; //法人号
          resBody.data.LayoutRow = this.menuGroupAdd.LayoutRow; //分组行数
          resBody.data.LayoutCol = this.menuGroupAdd.LayoutCol; //分组列数
          resBody.data.ThemeColor = this.menuGroupAdd.ThemeColor; //背景颜色
          resBody.data.MenuPath = this.menuGroupAdd.MenuPath; //交易路径
          resBody.data.MenuSize = this.menuGroupAdd.MenuSize; //大小
          resBody.data.MenuIcon = this.imageUrl; //图标
          resBody.data.BG = this.imageUrlBG; //背景
          resBody.data.IsVisiBle = this.menuGroupAdd.IsVisiBle; //是否可见
          resBody.data.ActiveClass = this.menuGroupAdd.ActiveClass; //点击效果
          resBody.data.AppNum = this.QueryForm.appId; //应用编号
          resBody.data.MenuViewNum = this.QueryForm.menuView; //菜单视图
          resBody.data.Asyniden = "1"; //异步标识
          if (this.mark === "0") {
            resBody.data.MenuType = ""; // MenuType;//菜单类型 一级菜单
          } else if (this.mark === "1") {
            resBody.data.MenuType = "01"; // MenuType;//菜单类型 : 01 目录节点
          } else if (this.mark === "2") {
            resBody.data.MenuType = "02"; // MenuType;//菜单类型 02 交易节点
            resBody.data.Asyniden = this.menuGroupAdd.Asyniden; //异步标识
          } else if (this.mark === "3") {
            resBody.data.MenuType = this.currentRow.MenuType; // MenuType;//菜单类型 02 交易节点
          }
          request(resBody)
            .then(response => {
              if (response.APP_HEAD.ReturnCode === "000000") {
                this.loading = false;
                let mes = this.mark == "3" ? "修改" : "创建";
                this.$message({
                  type: "success",
                  message: `交易${mes}${response.SYS_HEAD.ReturnMessage}!`
                });
                this.$refs.menuGroupAdd.resetFields();
                this.$refs.menuGroupAdd.clearValidate();
                this.queryDeal();
              } else {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: `${response.SYS_HEAD.ReturnMessage}!`
                });
              }
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          this.$message({
            type: "warning",
            message: "请输入合法的数据！"
          });
          return false;
        }
      });
    },
    handleProgress(event, file, fileList) {
      //上传文件时得钩子函数
      this.imageUrl = this.fileDownloadUrl + file.name; //获取到路径+图片名
    },
    beforeRemove(file, fileList) {
      //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      //文件列表移除文件时的钩子
      // console.log(file, fileList);
      this.imageUrl = "";
    },
    handlePreview(file) {
      //点击文件列表中已上传的文件时的钩子
      // this.dialogImageUrl = this.fileDownloadUrl+file.name;
      // this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      //文件超出个数限制时的钩子
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleProgressBG(event, file, fileList) {
      //上传文件时得钩子函数
      this.imageUrlBG = this.fileDownloadUrl + file.name; //获取到上传得路径+图片名
    },
    beforeRemoveBG(file, fileList) {
      //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemoveBG(file, fileList) {
      //文件列表移除文件时的钩子
      // console.log(file, fileList);
      this.imageUrlBG = "";
    },
    handlePreviewBG(file) {
      //点击文件列表中已上传的文件时的钩子
      // this.dialogImageUrl = this.fileDownloadUrl+file.name;
      // this.dialogVisible = true;
    },
    handleExceedBG(files, fileList) {
      //文件超出个数限制时的钩子
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    sizeChange(val) {
      //交易大小改变
      if (val[0] === "4") {
        this.isDisabledSize = false;
        this.userDefined = "4";
      } else {
        this.isDisabledSize = true;
      }
    },
    addTradGroup(titleValue, mark) {
      this.addTradeGroup = true;
      this.isShowMenu = false;
      this.isShowGroup = true;
      this.mark = mark;
      this.menuGroupAdd = {
        IsVisiBle: "1",
        Asyniden: "1",
        ThemeColor: "#409EFF"
      };
      this.isDisabled = false; //控制交易分组ID是否可输入
      this.menuGroupAdd.ParentMenuNum =
        mark == "0" ? "0" : this.currentRow.MenuNum;
      if (mark == "1") {
        this.isShowTrade = true;
      } else if (mark == "2") {
        //新增交易
        this.isShowGroup = false;
        this.isShowTrade = true;
        // this.menuGroupAdd.MenuNum=this.currentRow.MenuNum;
      } else if (mark == "0") {
        // this.menuGroupAdd.ParentMenuNum="0";
        this.isShowTrade = false;
      } else if (mark == "3") {
        this.menuGroupAdd = this.currentRow;
        this.isDisabled = true; //控制交易分组ID是否可输入
        this.isShowTrade = true;
        if (this.currentRow.MenuType == "02") {
          this.isShowGroup = false;
          titleValue = titleValue + "交易";
        } else {
          titleValue = titleValue + "交易目录";
        }
      }
      this.rightTitle = titleValue;
    },
    returnMes() {
      this.$refs.menuGroupAdd.resetFields();
      this.$refs.menuGroupAdd.clearValidate();
      this.addTradeGroup = false;
      this.rightTitle = "维护";
    },
    rightClick(event, data, node, val) {
      console.log(data,node, val)
      this.currentRow = data;
      if (data.MenuNum == "0") {
        this.isRoot = false;
      } else {
        this.isRoot = true;
      }

      if (data.MenuType == "02") {
        this.isRightClick = true;
      } else {
        this.isRightClick = false;
      }
      //交易树右键
      this.isShowMenu = true;
      if (event.clientY + 200 > document.body.clientHeight) {
        this.$refs.rightClickLog.style.top =
          document.body.clientHeight - 200 + "px";
        this.$refs.rightClickLog.style.left = event.clientX + "px";
      } else {
        this.$refs.rightClickLog.style.top = event.clientY + "px";
        this.$refs.rightClickLog.style.left = event.clientX + "px";
      }
    },
    resetForm() {
      this.$refs.QueryForm.resetFields();
    },
    itemDel() {
      //删除交易
      this.loading = true;
      let resBody = new menuAdd();
      resBody.data = this.currentRow; //this.menuGroupAdd.parentId;
      resBody.data.Oeration = "D"; //操作方式（A新增，M修改，D删除）
      resBody.data.MenuNum = this.currentRow.MenuNum;
      resBody.data.MenuName = this.currentRow.MenuName;
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: `交易删除成功!`
            });
            this.queryDeal();
          } else {
            this.loading = false;
            this.$message({
              type: "success",
              message: `${response.SYS_HEAD.ReturnMessage}!`
            });
          }
        })
        .catch(error => {});
    },
    delBut() {
      //删除弹窗
      if (!this.currentRow.Children) {
        this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.itemDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          type: "error",
          message: "节点下有目录或业务!无法删除!"
        });
      }
      this.isShowMenu = false;
    },
    detailInfo(val) {
      //打开图标和背景图片
      window.open(val);
    },
    queryDeal() {
      //查询交易树
      this.$refs.QueryForm.validate(valid => {
        if (valid) {
          this.tradeTreeData = [];
          this.isHasData = true;
          this.addTradeGroup = false;
          this.rightTitle = "维护";
          this.selection = [];
          this.isDisabledDel = false;
          this.loading = true;
          let resBody = new queryDeal();
          resBody.data.AppNum = this.QueryForm.appId;
          resBody.data.MenuViewNum = this.QueryForm.menuView;
          request(resBody)
            .then(response => {
              console.log(response)
              this.isHasData = false;
              if (response.APP_HEAD.ReturnCode === "000000") {
                this.loading = false;
                if (response.RspInfo) {
                  let result = response.RspInfo.menuTreeDict || [];
                  let treeDate = [
                    {
                      MenuNum: "0",
                      SupMenuNo: "",
                      MenuName: "主菜单",
                      Children: []
                    }
                  ];
                  treeDate[0].Children = result;
                  this.tradeTreeData = treeDate;
                } else {
                  this.$message({
                    type: "warning",
                    message: response.SYS_HEAD.ReturnMessage
                  });
                }
              } else if (response.APP_HEAD.ReturnCode === "CID001") {
                let treeDate = [
                  {
                    MenuNum: "0",
                    SupMenuNo: "",
                    MenuName: "主菜单",
                    Children: []
                  }
                ];
                this.tradeTreeData = treeDate;
              } else {
                this.tradeTreeData = [];
                this.$message({
                  type: "warning",
                  message: response.SYS_HEAD.ReturnMessage
                });
                // this.$message({
                // type: "error",
                //   message:
                //     "请求失败，错误码:" +
                //     response.SYS_HEAD.ReturnCode +
                //     "，错误信息：" +
                //     response.SYS_HEAD.ReturnMessage
                // });
              }
              this.loading = false;
            })
            .catch(error => {
              this.tradeTreeData = [];
              this.loading = false;
              console.log(error);
            });
        } else {
          this.$message({
            type: "warning",
            message: "请选择查询数据！"
          });
          return false;
        }
      });
    },
    dataFormat(row, column) {
      //格式化表格数据
      return this.enum[row[column.property]];
    },
    dataFormatSize(row, column) {
      //格式化表格数据
      return row[column.property].indexOf(",") == -1
        ? this.enumSize[row[column.property]]
        : row[column.property];
    },
    handleSizeChange() {
      this.queryDeal();
    },
    handleCurrentChange() {
      this.queryDeal();
    }
  }
};
</script>

<style lang="scss" scoped>
@keyframes myfirst {
  0% {
    right: 0;
  }
  25% {
    right: -144px;
  }
  50% {
    right: 0;
  }
  75% {
    right: -144px;
  }
  100% {
    right: 0;
  }
  // from {right:0;}
  // to {right:-144px;}
}
.clearfix {
  position: relative;
  overflow: hidden;
}
.treeTitle {
  position: absolute;
  right: 0;
  color: #ccc;
  // animation:myfirst 5s infinite alternate;
}
.itemHeight {
  height: 550px;
}
.rightStyle {
  position: fixed;
  background: #fff;
  z-index: 20000;
}
.rightClickParent {
  padding: 10px 0;
  margin: 5px 0;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.rightClickChildren {
  list-style: none;
  line-height: 36px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: none;
}
.rightClickChildren:hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}
.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}
</style>
